<template>
  <view class="grade">
    <view
      class="grade-item"
      v-for="item in gradeList"
      :key="item.id"
      @click="handleItemClick(item)"
    >
      {{ item.gradeName }}
    </view>
  </view>
</template>

<script setup>
  import { listGrade } from '@/api/org.js';

  import { goBack } from '@/utils/app';

  onMounted(() => {
    listGradeReq();
  });

  const gradeList = ref([]);
  const listGradeReq = async () => {
    const res = await listGrade();
    const data = res.data || [];
    gradeList.value = data;
  };

  const handleItemClick = (item) => {
    uni.$emit('__selectGrade__', item);
    goBack();
  };
</script>

<style scoped lang="scss">
  .grade {
    margin-top: 24rpx;
    display: flex;
    flex-direction: column;

    .grade-item {
      padding: 24rpx 24rpx;
      color: #1d2129;
      font-family: PingFang SC;
      font-weight: 500;
      font-size: 32rpx;
      background: #fff;
      border-bottom: 1rpx solid #efeff4;
    }
    .grade-item:last-child {
      border-bottom: none;
    }
  }
</style>
